<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧边固定</title>
    <link rel="stylesheet" href="./css/fenlei.css">
    
</head>
<body>
    <div class="box">
        <div class="listname">
            <a><i></i><span>网页</span></a>
            <a><i></i><span>手游</span></a>
            <a><i></i><span>动漫</span></a>
            <a><i></i><span>漫画</span></a>
            <a><i></i><span>动画</span></a>
            <a><i></i><span>小说</span></a>
            <a><i></i><span>社区</span></a>
        </div>
        <div class="list"><i></i><span>x</span></div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const list = document.querySelector('.list');
            const listname = document.querySelector('.listname');
            const icon = list.querySelector('i');

            list.addEventListener('click', function() {
                const isOpen = listname.style.display === 'block';
                
                
                listname.style.display = isOpen ? 'none' : 'block';
               
                icon.textContent = isOpen ? '' : '';

                
                console.log(isOpen ? '' : '');
            });
        });
    </script>
</body>
</html>